<template>
  <div class="_wz_hiddenTroubleReportAdd">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">隐患部位</p>
          <Row>
            <i-col span="8">
              <FormItem label="运输企业" prop="deptUuid">
                <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable @on-change="deptFun">
                  <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="上报部门" prop="riskInspectItemInOrgUuid">
                <i-select v-model="formData.riskInspectItemInOrgUuid" filterable placeholder="请选择上报部门" clearable  @on-change="riskInspectItemUserListFun">
                  <Option v-for="item in coreInOrgList" :value="item.uuid" :key="item.uuid">{{ item.inOrgName }}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="上报人" prop="riskInspectItemUserUuid">
                <i-select v-model="formData.riskInspectItemUserUuid" filterable placeholder="请选择上报人" clearable>
                  <Option v-for="item in riskInspectItemUserList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="上报方式" prop="riskInspectItemType">
                <i-select v-model="formData.riskInspectItemType" filterable placeholder="请选择上报方式" clearable>
                  <Option :value="1">清单上报</Option>
                  <Option :value="2">自主上报</Option>
                </i-select>
              </FormItem>
            </i-col>
            <template v-if="formData.riskInspectItemType == 1">
              <i-col span="8">
                <FormItem label="隐患类型" prop="riskPositionType">
                  <i-select v-model.number="formData.riskPositionType" filterable placeholder="请选择隐患类型" clearable @on-change="screeningCascade">
                    <Option :value="1">基础管理</Option>
                    <Option :value="2">设备设施</Option>
                    <Option :value="3">作业活动</Option>
                  </i-select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="隐患部位" prop="riskPositionUuid">
                  <i-select v-model="formData.riskPositionUuid" filterable placeholder="请选择隐患部位" clearable @on-change="riskPositionItemListFun">
                    <Option v-for="item in riskPositionList" :value="item.uuid" :key="item.uuid">{{ item.riskPositionName }}</Option>
                  </i-select>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="隐患项目" prop="riskPositionItemUuid">
                  <i-select v-model="formData.riskPositionItemUuid" filterable placeholder="请选择隐患项目" clearable @on-change="riskPositionItemDataFun">
                    <Option v-for="item in riskPositionItemList" :value="item.uuid" :key="item.uuid">{{ item.riskPositionItemName }}</Option>
                  </i-select>
                </FormItem>
              </i-col>
            </template>
          </Row>
        </Card>
        <Card dis-hover :bordered="true" style="margin:0 0 10px;" v-if="formData.riskInspectItemType == 1">
          <p slot="title">隐患项目</p>
          <Row>
            <i-col span="8">
              <FormItem label="隐患项目">
                <i-input v-model="riskPositionItemData.riskPositionItemName" placeholder="--" disabled />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="责任部门">
                <i-input v-model="riskPositionItemData.riskPositionItemInOrgName" placeholder="--" disabled />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="责任人">
                <i-input v-model="riskPositionItemData.riskPositionItemUserName" placeholder="--" disabled />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="检查标准">
                <i-input v-model="riskPositionItemData.riskPositionItemCriterion" type="textarea" :rows="4" placeholder="--" disabled />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="失控表现">
                <i-input v-model="riskPositionItemData.riskPositionItemPerformance" type="textarea" :rows="4" placeholder="--" disabled />
              </FormItem>
            </i-col>
<!--            <i-col span="24">-->
<!--              <FormItem label="管控措施">-->
<!--                <i-input v-model="riskPositionItemData.riskPositionItemMeasures" type="textarea" :rows="4" placeholder="&#45;&#45;" disabled />-->
<!--              </FormItem>-->
<!--            </i-col>-->
<!--            <i-col span="24">-->
<!--              <FormItem label="个人防护">-->
<!--                <i-input v-model="riskPositionItemData.riskPositionItemProtect" type="textarea" :rows="4" placeholder="&#45;&#45;" disabled />-->
<!--              </FormItem>-->
<!--            </i-col>-->
<!--            <i-col span="24">-->
<!--              <FormItem label="应急措施">-->
<!--                <i-input v-model="riskPositionItemData.riskPositionItemBurst" type="textarea" :rows="4" placeholder="&#45;&#45;" disabled />-->
<!--              </FormItem>-->
<!--            </i-col>-->
          </Row>
        </Card>
        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">隐患上报</p>
          <Row>
            <i-col span="8">
              <FormItem label="隐患排查" prop="riskInspectItemName">
                <i-input v-model="formData.riskInspectItemName" placeholder="请填写隐患排查" clearable />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="隐患等级" prop="riskInspectItemLv">
                <i-select v-model.number="formData.riskInspectItemLv" filterable placeholder="请选择隐患等级" clearable>
                  <Option :value="1">一般隐患</Option>
                  <Option :value="2">重大隐患</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="核查部门" prop="riskInspectItemCheckInOrgUuid">
                <i-select v-model="formData.riskInspectItemCheckInOrgUuid" filterable placeholder="请选择核查部门" clearable  @on-change="riskInspectItemCheckUserListFun">
                  <Option v-for="item in coreInOrgList" :value="item.uuid" :key="item.uuid">{{ item.inOrgName }}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="核查人员" prop="riskInspectItemCheckUserUuid">
                <i-select v-model="formData.riskInspectItemCheckUserUuid" filterable placeholder="请选择核查人员" clearable>
                  <Option v-for="item in riskInspectItemCheckUserList" :value="item.uuid" :key="item.uuid">{{item.name}}</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="排查描述" prop="riskInspectItemContext">
                <i-input v-model="formData.riskInspectItemContext" placeholder="请填写排查描述" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="排查图片">
                <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="riskInspectItemImgFileFun">
                  <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
                </Upload>
                <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">
                  <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in riskInspectItemImgList">
                    <div class="_wz_insertimage" style="display: block;">
                      <img :src="item" @error="public.imgDispose" />
                      <div class="_wz_insertimage-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="riskInspectItemImgListRem(index)"></Icon>
                      </div>
                    </div>
                  </div>
                </div>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="签字照片" class="ivu-form-item-required">
                <div style="width: 200px;overflow: hidden;" @click="riskInspectItemSignFileType = true;">
                  <div class="_wz_insertimage" style="display: block;" v-if="!signFile.url">
                    点击签字
                  </div>
                  <div class="_wz_insertimage" style="display: block;" v-else>
                    <img :src="signFile.url" @error="public.imgDispose" />
                  </div>
                </div>
              </FormItem>
            </i-col>
          </Row>
        </Card>

      </Form>

    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>




    <!--图片查看-->
    <Modal title="人员签字" v-model="riskInspectItemSignFileType"  :mask-closable="false" :footer-hide="true">
      <div style="padding: 0 0 53px 0;" v-if="riskInspectItemSignFileType">
        <vue-esign ref="esign" class="mySign" :width="800" :height="300" :isCrop="false" :lineWidth="6" lineColor="#000000"/>
        <div class="demo-drawer-footer" style="z-index: 99;">
          <Button style="margin-right: 8px" @click="riskInspectItemSignFileType = false">取消</Button>
          <Button type="primary" @click="handleGenerate">提交</Button>
        </div>
      </div>
    </Modal>

    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>



    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
import detailsHiddenParts from "./detailsHiddenParts";
export default {
  components: {
    detailsHiddenParts,//隐患部位详情
  },
  data() {
    return {
      riskPositionItemData:{},//隐患项目详情
      spinShow: false,//本页加载
      formData: {riskInspectItemType:2},
      ruleValidate: {//正则
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],
        riskInspectItemInOrgUuid: [
          {required: true, message: '请选择上报部门', trigger: 'blur'}
        ],
        riskInspectItemUserUuid: [
          {required: true, message: '请选择上报人', trigger: 'blur'}
        ],
        riskInspectItemType: [
          {type:'number',required: true, message: '请选择上报方式', trigger: 'blur'}
        ],
        riskPositionType: [
          {type:'number',required: true, message: '请选择隐患类型', trigger: 'blur'}
        ],
        riskPositionUuid: [
          {required: true, message: '请选择隐患部位', trigger: 'blur'}
        ],
        riskPositionItemUuid: [
          {required: true, message: '请选择隐患项目', trigger: 'blur'}
        ],
        riskInspectItemName: [
          {required: true, message: '请填写隐患排查', trigger: 'blur'}
        ],
        riskInspectItemLv: [
          {type:'number',required: true, message: '请选择隐患等级', trigger: 'blur'}
        ],
        riskInspectItemCheckUserUuid: [
          {required: true, message: '请选择核查人员', trigger: 'blur'}
        ],
        riskInspectItemCheckInOrgUuid: [
          {required: true, message: '请选择核查部门', trigger: 'blur'}
        ],
        riskInspectItemContext: [
          {required: true, message: '请填写排查描述', trigger: 'blur'}
        ],
      },
      subDeptList:[],//企业
      coreInOrgList:[],//上报部门 核查部门
      riskInspectItemUserList:[],//上报人
      riskPositionList:[],//隐患部位
      riskPositionItemList:[],//隐患项目
      riskInspectItemCheckUserList:[],//核查人


      uploadProgress: 0,//文件上传进度
      riskInspectItemSignFileType:false,//签字
      //缩略图
      visible: false,
      imgSrc: "",
      riskInspectItemImgList:[],//隐患资料
      riskInspectItemImgFileList:[],//隐患资料
      riskCheckPhaseList:[],
      signFile:{//手签字
        url:'',
        data:null
      },
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;

        that.$set(that.formData, 'deptUuid', that.subDeptList[0].uuid)//赋值
        that.deptFun()
      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    //企业级联
    deptFun(){
      let that = this;
      if(!!that.formData.deptUuid){
        /*
        * 各自清除 各自 子集的数据 和数组
        * */

        //部门数据  上级和 核查 用一个请求
        that.axios.post(that.apiUrl.coreInOrgCoreInOrgList, {deptUuid:that.formData.deptUuid}).then(res => {
          if (!!res) {
            that.coreInOrgList = res.data.data;
            if(that.coreInOrgList.length > 0){
              that.$set(that.formData, 'riskInspectItemInOrgUuid', that.coreInOrgList[0].uuid)//赋值  上级部门
              that.riskInspectItemUserListFun();//上级部门 级联人员
              that.$set(that.formData, 'riskInspectItemCheckInOrgUuid', that.coreInOrgList[0].uuid)//赋值  核查部门
              that.riskInspectItemCheckUserListFun();//核查部门 级联人员


              that.screeningCascade();//级联 隐患部位
            }else{
              that.coreInOrgList = [];//部门
            }
          }
        }).catch(err => {
          console.log("失败", err)
        })

      }else{
        that.coreInOrgList = [];
        that.$set(that.formData, 'riskInspectItemInOrgUuid', '')//赋值  上级部门
        that.riskInspectItemUserListFun();//上级部门 级联人员
        that.$set(that.formData, 'riskInspectItemCheckInOrgUuid', '')//赋值  核查部门
        that.riskInspectItemCheckUserListFun();//核查部门 级联人员
        that.screeningCascade();//级联 隐患部位
      }

    },
    //排查周期 级联
    screeningCascade(){
      let that = this;
      if(!!that.formData.riskPositionType && !!that.formData.deptUuid){
        //隐患清单
        that.axios.post(that.apiUrl.webApi + "/risk/position/riskPositionList", {deptUuid:that.formData.deptUuid,riskPositionType:that.formData.riskPositionType}).then(res => {
          if (!!res) {
            that.riskPositionList = res.data.data;
            if(that.riskPositionList.length > 0){
              that.$set(that.formData, 'riskPositionUuid', that.riskPositionList[0].uuid)//赋值
            }else{
              that.$set(that.formData, 'riskPositionUuid', '')//赋值
            }

            that.riskPositionItemListFun();
          }
        }).catch(err => {
          console.log("失败", err)
        })
      }else{
        that.riskPositionList = [];
        that.$set(that.formData, 'riskPositionUuid', '')//赋值
        that.riskPositionItemListFun();
      }
    },
    //隐患项目
    riskPositionItemListFun(){
      let that = this;
      if(!!that.formData.riskPositionUuid){
        //隐患清单
        that.axios.post(that.apiUrl.webApi + "/risk/position/riskPositionItemList", {riskPositionUuid:that.formData.riskPositionUuid}).then(res => {
          if (!!res) {
            that.riskPositionItemList = res.data.data;
            if(that.riskPositionItemList.length > 0){
              that.$set(that.formData, 'riskPositionItemUuid', that.riskPositionItemList[0].uuid)//赋值
            }else{
              that.$set(that.formData, 'riskPositionItemUuid', '')//赋值
            }
            that.riskPositionItemDataFun();
          }
        }).catch(err => {
          console.log("失败", err)
        })
      }else{
        that.riskPositionItemList = [];
        that.$set(that.formData, 'riskPositionItemUuid', '')//赋值
        that.riskPositionItemDataFun();
      }
    },

    //上报部门级联人
    riskInspectItemUserListFun(){
      let that = this;
      if(!!that.formData.riskInspectItemInOrgUuid){
        let inOrgType = '';//获取部门类型
        that.coreInOrgList.forEach(function(k, i) {
          if(that.formData.riskInspectItemInOrgUuid == k.uuid){
            inOrgType = k.inOrgType;
            return false;
          }
        })
        if(inOrgType == 1){//管理型单位  //人员列表
          that.axios.post(that.apiUrl.systemUserSystemUserList, {inOrgUuid:that.formData.riskInspectItemInOrgUuid}).then(res => {
            if (!!res) {
              that.riskInspectItemUserList = res.data.data;
              if(that.riskInspectItemUserList.length > 0){
                that.$set(that.formData, 'riskInspectItemUserUuid', that.riskInspectItemUserList[0].uuid)//赋值
              }else{
                that.$set(that.formData, 'riskInspectItemUserUuid', '')//赋值
              }
            }
          }).catch(err => {
            console.log("失败", err)
          })
        }else if(inOrgType == 2){//生产型单位  //驾培人员
          that.axios.post(that.apiUrl.coreDriverCoreDriverList, {inOrgUuid:that.formData.riskInspectItemInOrgUuid}).then(res => {
            if (!!res) {
              that.riskInspectItemUserList = res.data.data;
              if(that.riskInspectItemUserList.length > 0){
                that.$set(that.formData, 'riskInspectItemUserUuid', that.riskInspectItemUserList[0].uuid)//赋值
              }else{
                that.$set(that.formData, 'riskInspectItemUserUuid', '')//赋值
              }
            }
          }).catch(err => {
            console.log("失败", err)
          })
        }
      }else{
        that.riskInspectItemUserList = [];//人员
        that.$set(that.formData, 'riskInspectItemUserUuid', '')//赋值
      }
    },
    //隐患项目 详情
    riskPositionItemDataFun(){
      let that = this;
      if(!!that.formData.riskPositionItemUuid){
        that.riskPositionItemList.forEach(function (k, i) {
          if(k.uuid == that.formData.riskPositionItemUuid){
            that.riskPositionItemData = k;
            return false;
          }
        })
      }else{
        that.riskPositionItemData = {};
      }
    },
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //部门级联人
    riskInspectItemCheckUserListFun(){
      let that = this;
      if(!!that.formData.riskInspectItemCheckInOrgUuid){
        let inOrgType = '';//获取部门类型
        that.coreInOrgList.forEach(function(k, i) {
          if(that.formData.riskInspectItemCheckInOrgUuid == k.uuid){
            inOrgType = k.inOrgType;
            return false;
          }
        })
        if(inOrgType == 1){//管理型单位  //人员列表
          that.axios.post(that.apiUrl.systemUserSystemUserList, {inOrgUuid:that.formData.riskInspectItemCheckInOrgUuid}).then(res => {
            if (!!res) {
              that.riskInspectItemCheckUserList = res.data.data;
              if(that.riskInspectItemCheckUserList.length > 0){
                that.$set(that.formData, 'riskInspectItemCheckUserUuid', that.riskInspectItemCheckUserList[0].uuid)//赋值
              }else{
                that.$set(that.formData, 'riskInspectItemCheckUserUuid', '')//赋值
              }
            }
          }).catch(err => {
            console.log("失败", err)
          })
        }else if(inOrgType == 2){//生产型单位  //驾培人员
          that.axios.post(that.apiUrl.coreDriverCoreDriverList, {inOrgUuid:that.formData.riskInspectItemCheckInOrgUuid}).then(res => {
            if (!!res) {
              that.riskInspectItemCheckUserList = res.data.data;
              if(that.riskInspectItemCheckUserList.length > 0){
                that.$set(that.formData, 'riskInspectItemCheckUserUuid', that.riskInspectItemCheckUserList[0].uuid)//赋值
              }else{
                that.$set(that.formData, 'riskInspectItemCheckUserUuid', '')//赋值
              }
            }
          }).catch(err => {
            console.log("失败", err)
          })
        }
      }else{
        that.riskInspectItemCheckUserList = [];//人员
        that.$set(that.formData, 'riskInspectItemCheckUserUuid', '')//赋值
      }
    },
    //生成图片
    handleGenerate(){
      let that = this;
      // 使用生成器调用把签字的图片转换成为base64图片格式
      that.$refs.esign.generate().then((res) => {
        // base64转换成图片
        var arr = res.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

        while(n--){undefined
          u8arr[n] = bstr.charCodeAt(n);
        }
        var obj = new Blob([u8arr], {type:mime});
        that.signFile = {
          url : window.URL.createObjectURL(obj),
          data : obj
        }
        that.riskInspectItemSignFileType = false;
      }).catch((err) => {
        console.log(err)
        that.$Message.warning("请签名后再生成签字图片");// 画布没有签字时会执行这里提示一下
      });
    },
    //缩略图查看
    handleView(src) {
      this.imgSrc = src;
      this.visible = true;
    },
    //隐患资料
    riskInspectItemImgFileFun(file) {//新增的时候 处理图片数据
      let that = this; //如果是文件  就展示文件名
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        if(that.riskInspectItemImgFileList.length > 6){
          that.$Message.warning('最多可上传7张图片');
          return false;
        }
        that.riskInspectItemImgList.push(window.URL.createObjectURL(file));
        that.riskInspectItemImgFileList.push(file);
      } else {
        this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    //删除
    riskInspectItemImgListRem(index){
      this.riskInspectItemImgList.splice(index, 1)
      this.riskInspectItemImgFileList.splice(index, 1)
    },
    ////////////////////////////////////////////////////////////////////////////////////////////
    //提交表单
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使用
          if (!that.signFile.data) {
            that.$Message.error('请上传手签照片');
            return false;
          }

          let data = that.formData;

          if(data.riskInspectItemType == 2){
            delete data.riskPositionType;//隐患类型
            delete data.riskPositionUuid;//隐患部位
            delete data.riskPositionItemUuid;//隐患项目
          }


          data.riskInspectItemProcess = 1;
          data.riskInspectItemState = 1;//隐患排查状态
          let formData = new FormData();

          for (let key in data) {
            formData.append(key, data[key]);
          }

          if (!!that.signFile.data) {//手签字
            formData.append('signFile', that.signFile.data);
          }

          //图片赋值
          that.riskInspectItemImgFileList.forEach(function (k, i) {
            formData.append('imgList', k);
          })

          that.axios.post(that.apiUrl.webApi + "/risk/inspect/riskInspectItemOperate", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success('保存成功');
              that.$emit('closeFun', true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.$Message.error('请正确填写表单');
        }
      })
    },

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_hiddenTroubleReportAdd {

}
</style>
